<script setup>
import avater from "@/assets/avatar.png"
import { useUserStore, useAuthStore, useAdminStore } from "@/stores";
import router from '@/router/index.js'
import { ref } from 'vue'
import { changePassword } from "@/api/login";
defineProps({
  isBackShow: Boolean,
  screenPath: String,
  title: String,
})
// 退出登录
const userStore = useUserStore()
const authStore = useAuthStore()
const adminStore = useAdminStore()
const doLogout = () => {
  console.info('退出登录')
  userStore.removeToken()
  userStore.removeUserInfo()
  authStore.removeauthComponentList()
  authStore.removeauthPermissionList()
  authStore.removeauthMenuList()
  adminStore.removeDept()
  ElMessage.success('退出登录')
  router.push('/login')
}
const userInfo = userStore.userInfo
// 用户操作
const descShow = ref(false)
const editShow = ref(false)

//修改密码
const passwordChange = ref({
  password: '',
  repassword: '',
  newpassword: '',
})

//验证规则
const rules = ref({
  password: [
    { required: true, message: '请输入密码', tirgger: 'blur' },
    { pattern: /^(?=^.{8,}$)(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.*\n).*$/, message: '必须包含8位以上数字、大/小写字母、标点符号', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '请输入密码', tirgger: 'blur' },
    { pattern: /^(?=^.{8,}$)(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.*\n).*$/, message: '必须包含8位以上数字、大/小写字母、标点符号', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordChange.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }
    }
  ]
})
// 修改密码

const doChangePassword = async () => {
  await changePassword(passwordChange.value).then((res => {
    if (res.data.success) {
      ElMessage.success('密码修改成功')
    } else {
      ElMessage.fail('修改失败，请重新尝试')
    }
  }))
  editShow.value = false
}
</script>

<template>
  <el-header class="header">
    <div class="title">
      <div class=logo></div>
      <span class="title-word">
        <slot></slot>
      </span>
    </div>
    <div>
      <el-link type="warning" :href="screenPath" target="_blank" style="margin-right: 50px; vertical-align: middle; ">
        {{ title }}
      </el-link>
      <el-link v-show="isBackShow" href="/main" style="margin-right: 50px; vertical-align: middle; color:#fff"><el-icon>
          <ArrowLeftBold />
        </el-icon>返回平台</el-link>
      <el-dropdown>
        <div class="user">
          <el-avatar shape="circle" size="small" :src="avater" />
          <el-text class="user-name">{{ userInfo.username }}</el-text>
          <el-icon class="el-icon--ArrowRightBold" color="white">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="descShow = true">查看资料</el-dropdown-item>
            <!-- <el-dropdown-item>修改资料</el-dropdown-item> -->
            <el-dropdown-item @click="editShow = true">修改密码</el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="doLogout">退出</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
  <el-dialog class="userInfoDialog" v-model="descShow" title="查看资料" center>
    <el-descriptions border class="desc">
      <el-descriptions-item label="用户名" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.username
        }}</el-descriptions-item>
      <el-descriptions-item label="姓名" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.name
        }}</el-descriptions-item>
      <el-descriptions-item label="工号" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.code
        }}</el-descriptions-item>
      <el-descriptions-item label="性别" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.gender === '1' ? '男' :
          '女' }}</el-descriptions-item>
      <el-descriptions-item label="手机号" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.phone
        }}</el-descriptions-item>
      <el-descriptions-item label="邮箱" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.email
        }}</el-descriptions-item>
      <el-descriptions-item label="状态" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.status === '1' ? '启用'
          :
          '停用'
        }}</el-descriptions-item>
      <el-descriptions-item label="部门" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.dept
        }}</el-descriptions-item>
      <el-descriptions-item label="岗位" label-align="center" aligen="left" width="150px" label-class-name="my-label"
        class-name="my-content">{{ userInfo.job
        }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <el-dialog class="editPassword" v-model="editShow" title="修改密码" width="500px" center>
    <el-form label-width="100px" style="max-width: 400px; margin-top:30px" :model="passwordChange" :rules="rules">
      <el-form-item label="原密码" prop="password">
        <el-input type="password" v-model="passwordChange.password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="repassword">
        <el-input type="password" v-model="passwordChange.repassword"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="password">
        <el-input type="password" v-model="passwordChange.newpassword"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button class="btn" type="primary" round size="large" @click="doChangePassword"
        style="width: 15rem;">确认</el-button>
    </template>

  </el-dialog>
</template>

<style scoped lang="less">
.header {
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: var(--el-color-primary-dark-2);
  color: white;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 999;

  .title {
    display: flex;
    align-items: center;


    .logo {
      width: 35px;
      height: 35px;
      background: url("@/assets/logo.png") center/80% no-repeat;
      margin-right: 10px;

    }

    .title-word {
      height: 64px;
      line-height: 64px;
      margin: 0;
      font-weight: 700;
      font-size: 24px;
    }
  }



  .user {
    display: flex;
    align-items: center;
    outline: none;

    .user-name {
      vertical-align: middle;
      color: white;
      margin: 0 10px;
    }

    .el-icon--right:hover {
      rotate: 90deg;
    }
  }
}

.desc {
  margin: 30px 20px;
}

:deep(.my-label) {
  background: var(--el-color-primary-light-5) !important;
  // background-color: black;
}
</style>